Webアプリを創る 😊クリエイティブWeb

カテゴリー: Web アプリ

スマートフォン向けサイトの確認に便利な Chrome 拡張機能 Ripple Emulator

2013年5月13日

iPhone や Andoroid のスマートフォンの画面確認に便利なのが Ripple エミュレーター(現在は、Apache Ripple として開発中)です。Chrome の拡張機能ですが、下の図のように機種を選択すると機種の枠が表示されるし、ボタン一つで縦横も変更できるので、画面デザインの調整にはとても便利です。ただし、便利に使うためには、下の方に記載しましたが、インストールに注意が必要です。

WEB サービスの作成では、スマートフォンへの対応は大きな課題ですが、iPhone, iPad, Andoroido 等いろいろな機種があり、それに画面サイズも多く縦にでも横でも使えるので対応は結構大変です。今まで Andoroid での表示の確認には、Android SDK のエミュレターを使っていましたが、相当に重いソフトです。自分の場合 Andoroid アプリを作るわけではなく、画面の表示の確認ができればいいだけなので、適当なエミュレータを探していました。

Ripple エミュレーターが対応している機種は、iPhone 3G/3Gs, iPhone 4/4s, iPad, iPad 3, Nexus (Galaxy), Nexus 4, Nexus 7 (Tablet), Nexus One, Nexus S 等でとりあえず一通りの確認ができます。また、機能面では Geo Location や Cordova / PhoneGap にも対応しています。

image

インストールに注意!

Ripple エミュレーターについては、Gihyo.jpKLOG でも紹介されていますが、普通に Chrome ウェブストアからインストールすると、KLOG に書いてあるように、Googleを表示してみても、モバイル用の画面が表示されません。

それではかなり不便なので、どうしたらいいかというと、HTML5 WebWorks のページから Ripple Emulator をダウンロードして、手動でインストールすればいいということです。そうやってインストールすると、Google を表示したら、上の図のようにモバイル用の画面がちゃんと表示されるようになります。

なぜこういうことになるかというと、Chrome ウェブストアで配布されている Ripple エミュレーターでは、機種を設定しても User Agent が Chrome のまま変更されないためです。その理由は Google のマニフェストにある偽装の禁止のためだ(詳細 英文)ということです。

Ripple Emulator は、現在は、Apache のインキュベーションとして開発されており将来性のあるソフトウェアです。HTML5 WebWorks のページからダウンロードしたものだと、機種を設定するだけで画面サイズ等が設定でき、モバイルの画面の確認が便利なので、是非、使ってみてください。

最後に Chrome の拡張機能の手動でのインストールについてメモしておきます。
手動インストールのためには、拡張機能の設定画面を表示させます。その操作としては、以下のどちらかでできます。

  • 1. アドレスバーに、chrome://extensions/ と入力して Enter キーを押す。
  • 2. 左上の Chrome 設定ボタンを押して、「設定(S)」を選択して、設定の画面を表示して、右メニューにある「拡張機能」を選択する。

拡張機能の設定画面になったら、その画面にダウンロードしたファイルをドラッグ&ドロップします。
以下のようなダイアログが表示されるので、「追加」ボタンをクリックします。

image

レスポンシブWebデザインを使うべきか

2013年5月7日

最近スマートフォンからのアクセスが増えてきている。自分の Web サイトだと 40% 弱がスマートフォンからのアクセスになってきた。そろそろスマートフォン対策を考えないといけないと思っていたので、少し詳しく調べてみた。

Webサイトへのモバイルからのアクセス割合はWebサイトによって大きな違いがあるようだ。株式会社サムライファクトリーの調査によると2013年4月でスマートフォンの割合は18.36%という結果になっているが、『忍者アクセス解析』を設置しているサイトの解析データなので個人からのアクセスが多いので日本の平均よりは高めになっていると考えられる。世界でのモバイルの割合については Netmarketshare の調査によると、下の図のようにモバイルの割合が約10%になっている。

clip_image002

他の調査結果をみても、BtoB の場合には、モバイルからのアクセスは10%程度のようなので、日本でのWebサイトのアクセスに占めるスマートフォンの割合は10~15%ということになりそうだ。まだ現時点では割合はそれほど高くないが、株式会社サムライファクトリーの1年前の2012年4月の調査では Android 4.63%, iPhone 3.10% だったので2倍以上に増加していることになる。

これらのことを考えると個人向けのサイトについては、スマートフォンに早く対応した方がいいし、WordPress 等の CMS を使っている場合には、テーマの変更だけで対応できる「レスポンシブWebデザイン」を使うのが最もいい方法ということになる。レスポンシブWebデザインは、CSSの機能を使って、デバイスごとにレイアウトを最適化する技術で、サーバー側ではPC向けもスマートフォン向けも今までと同じ HTMLを作成すればいいので簡潔にスマートフォン対応が可能だ。例えば、WordPress の場合だと、レスポンシブ対応のテーマに変更するだけでスマートフォン対応が可能だ。

最後に、自分が作っているWebサイトで「レスポンシブWebデザイン」を使うのがいいのかどうか考えてみた。レスポンシブWebデザインを使用してスマートフォンで見やすくするためには「モバイルファースト」でデザインする必要がある。なぜかというと、どうしてもモバイルは画面が小さいため、PC用のものをそのまま使うと非常に縦に長い画面になって重要な情報を探すのにスクロールばかりしてしないといけなくなるので見づらくなってしまう。自分の場合は、PC用には多くの情報を載せたいと思っているし、スマートフォンからも少し見づらくてもその情報を見えるようにしたいと思っている。その場合、PC用と違って、スマートフォン用には画面が小さいだけに要約版が必要になってくる。やはり、「モバイルファースト」という考え方は非常に重要である。

ただ、このケースで「レスポンシブWebデザイン」を使うのには、一つの問題があると思う。一度に画面に表示できるデータが数倍以上違うのに同一のHTMLを使うため、スマートフォン用には過剰なHTMLになってしまうか、PC用には簡略すぎるものになってしまうからだ。

幸いなことに ASP.NET MVC や Umbraco MVC では、テンプレートの変更が容易で、モバイル用とPC用でテンプレートだけを変更するようにすればそれほど大きな手間にはならない。それに、モバイル用に不要なデータをサーバー側でなくせるので、スマートフォンでの処理が軽くなる。また、PC用とスマートフォン用を別対応にするとURLが別になるというが欠点だといわれているが、このタイプだとPC用とスマートフォン用も同じURLになる。

このようなことから、自分で作っているサイトでは、「レスポンシブWebデザイン」を使わずにいこうと思う。でも、一般的には「レスポンシブWebデザイン」が便利だということは間違いがないので、このブログサイトについては時間ができたらレスポンシブなテーマに変更しようと思っている。

Web サービスを一人で作るために必要な技術

2013年5月4日

一人で Webサービスを作るというのは難しいという話もあるので、どういう技術が必要なのか書き出してみた。括弧内は自分が使っているものです。

  • サーバー・ネットワーク ( AWS, Azure, 自宅サーバー )
  • アプリケーションフレームワーク ( ASP.NET MVC, Umbraco )
  • プログラム ( C#, R? )
  • データベース ( SQL Server )
  • フロントエンド ( HTML, CSS, Javascript, jQuery )
  • ライティング
  • マーケティング

今流行のものにすると括弧内は、以下のようになるようだ。

    • アプリケーションフレームワーク ( Ruby on Rails )
    • プログラム ( Ruby )
    • データベース ( MySQL )

技術に関する最大のポイントは、一通りをカバーする必要があるが、基礎知識があればそのレベルに関してはそれほど問題はないということ。最近は、便利なものがどんどん出てきているので、ハードルがどんどん下がってきている。だから、簡単に作れるとは言わないけど、作れるかどうかは、どちらかというと技術よりも作りたいものがあるかどうかということが問題だと思う。それに費用も自分の時間を使うと言うこと以外には殆どかからないし、自分の時間だって土日で十分だ。だから本当に作りたいと思うものがあれば、できるだけサービスを簡単なものにしてチャレンジしてみればいいと思う。実際に完成するかどうかでは、サービスを必要最小限の簡単なものにするというのがポイントだ。

Web サービスを一人で作るということ

2013年4月30日

フリーになって1ヶ月になるがやっと落ち着いてきた。この1ヶ月は、何をメインにするかいろいろ考えていたが、以前に少し作ったのだが結局は更新の時間が取れないので放置してあった「統計メモ帳」をベースにしてWebサイトを拡張していこうと思っている。

このサイトだとライター的な仕事の部分もあるので、最近のライターの状況を少し調べてみたが、ライターの状況もかなり厳しものがあるようだ。有名なフリーライターである安田理央氏がブログ「ライターになりたいという若者がいたら」では、ネットの原稿料が安くて生活ができないということが書かれている。

一方で、イケダハヤト氏の方は、「ライターへ告ぐ。「原稿料が安い」なんて嘆く暇があるなら、自分でビジネス創れば?」というブログを書いて、原稿料が低い」なんて嘆いている時点でダメなのですと挑戦的に言っている。確かにイケダハヤト氏は、単なるライターではなくて、マーケティングまで一人でやっているところが大きいと思う。

そういうことで自分も Webサイトでどれぐらいのアクセスを集められるか1年間やって見ようと思う。自分の場合は、ライター部分ではなくデータ部分でアクセスを集めないといけないので、いろいろ工夫が必要になってくるが、それも楽しみなので悪い仕事ではないと思っている。

一応、今年度の目標は、30万ページビュー(PV)の増加ということにしておこう。このサイトは月1500PVしかないので、この状況から1年で30万PVというのは無理だと思うので、別のサイトに丁度適当なものがあるのでそれを持って来る予定にしているので実際は35万PVのWebサイトにするというのが目標ということになる。

イケダハヤト氏の「ブログで稼ぐ」は現実的か?PV別ブログ収益をざっくり計算によるとブログの収益はかなりざっくりとした計算で下記のような収益イメージになるということだ。

  • 1万PV:〜1,000円
  • 5万PV:3,000〜10,000円
  • 10万PV:10,000〜50,000円
  • 20万PV:50,000〜100,000円
  • 30万PV:100,000〜150,000円
  • 40万PV:150,000〜200,000円
  • 50万PV:200,000〜250,000円

自分が運用しているサイトでは、低めの収益額になっているので、30万ページビューだと1年働いて月10万円の売り上げ増加にしかならないので、かなり悲惨にみえるかもしれない。それに30万ページビューを達成するのは結構ハードルが高い。でもやりたいことだから続けていけると思うし、一番大きいのは次の年には10万円からの出発になることだと思っている。

タイトルを「Webサービス作成日記」に変更しました

2012年11月10日

このブログを、「Windows 7 / Vista で Web サイトを構築」というタイトルで技術的なことを中心に書いてきて、もう4年になりました。その間に、Web の世界は大きく変わったと思います。AWS や Azure のクラウドが普及して、簡単にネットサービスを始めることができるようになったし、自分の方でも Web サイトの構築ではいろいろと経験を積むことができたし、興味の中心もWebの技術を学びたいということから、自分でネットサービスを開発・運営したいということに変わってきました。そこで、Windows 8 も発売されたので、この機会にタイトルを「Webサービス作成日記」に変更してみました。

最近は書くネタが少なくなって、ブログや本体の方の更新も少なくなってきました。そこで、少し方向を変更して、Webを開発・運営するためのノウハウについても書くことにしようと思っています。当面は、作りたいと思っていたけど放置していた Web サイトを Umbraco で作る経過をネタにしようかなと思っています。Umbraco は、自分が作りたいと思っている手書きの記事とプログラムで作成する記事とが入り交じるようなサイトにはぴったりな CMS です。自分でも Web サービスを作ろうと思う背景には、クラウドと Umbraco の存在が大きく、クラウドを使えば手間をかけずにハードウェアを準備できます。ただ、参入しやすくなった分 Web サービスの競争が激しくなっているかなと思います。

起業するにあたって、まず、大切なのはビジョンだといわれています。自分の場合、メリットはプログラムができることと数学が得意なこと、デメリットは面白いことが考えられないことだと思っているので、面白くなくても使ってくれるものを地道に作っていくことかなと思っています。あまり面白くはないんだけど作ってみたいサービスは結構思いついているので、最初の目標は、単純に役に立つWeb サービスを作ることにしようと思っています。ただし、最終目標は面白いWebサービスをつくるということにしよう。